<template>
  <div class="depart">
    <div class="top-box">
      <div class="left-box">
        <div class="color-box"></div>
        <p>岗位管理</p>
      </div>
      <el-button class="right-box" type="info" icon="el-icon-back" @click="Return()">返回</el-button>
    </div>
    <div class="xzbm">
      <!-- <el-button type="warning">修改</el-button> -->
      <el-button type="primary" @click="ads">新增</el-button>
    </div>
    <!-- <el-table stripe :data="tableDatas" style="width: 100%">
      <el-table-column type="index" prop="xuhao" label="序号" align="center"></el-table-column>
      <el-table-column prop="depart" label="部门" align="center"></el-table-column>
      <el-table-column label="岗位" align="center">
    <template slot-scope="scope">-->
    <!-- <el-select v-model="scope.row.DepartNames" clearable placeholder="请选择">
            <el-option
              v-for="item in scope.row.lstposition"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
    </el-select>-->
    <!-- <el-table class="ttable" :data="scope.row.lstposition">
            <el-table-column prop="value" align="center"></el-table-column>
    </el-table>-->
    <!-- <table>
            <tr v-for="(item, index) in scope.row.lstposition" :key="index"></tr>
          </table>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="warning" @click="xiugai(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>-->

    <!-- 111111111 -->
    <div class="tb">
      <table
        class="table"
        border="1"
        style="width:95%;text-align:center;background-color:#fff;margin-left:10px;border-color:#f5f5f5;table-layout:fixed;"
      >
        <thead>
          <tr style="height:48px;">
            <td style="width:100px">序号</td>
            <td>部门</td>
            <td>岗位</td>
            <td style="width:200px">操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableDatas" :key="index">
            <td>{{index+1}}</td>
            <td>{{item.depart}}</td>
            <td>
              <div
                style="height:30px;"
                v-for="(items, index) in item.lstposition"
                :key="index"
              >{{items.value}}</div>
            </td>
            <td>
              <div
                style="height:30px;padding-top:5px;"
                v-for="(items, index) in item.lstposition"
                :key="index"
              >
                <el-button
                  style="height:20px;line-height:3px;"
                  type="warning"
                  @click="xiugai(items.value,item.depart)"
                >修改</el-button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="pgnt">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 新增岗位弹框 -->
    <el-dialog
      title="新增岗位"
      :modal-append-to-body="false"
      :visible.sync="dialogVisibles"
      width="30%"
    >
      <div class="color_box"></div>
      <!-- <div class="ttop"> -->
      <el-form :inline="true" :model="formInliness" class="demo-form-inline">
        <el-form-item label="选择部门">
          <el-select
            v-model="formInliness.value"
            value-key="key"
            placeholder="请选择"
            @change="changes"
          >
            <el-option v-for="item in options" :key="item.key" :label="item.value" :value="item"></el-option>
          </el-select>
          <el-button type="primary" @click="xzengbumen">新增部门</el-button>
        </el-form-item>
        <el-form-item label="岗位名称">
          <el-input v-model="formInliness.password"></el-input>
        </el-form-item>
      </el-form>
      <!-- </div> -->
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="querend">确 认</el-button>
        <el-button size="small" type="info" @click="dialogVisibles = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新增部门弹框 -->
    <el-dialog
      title="新增部门"
      :modal-append-to-body="false"
      :visible.sync="dialogVisibless"
      width="30%"
    >
      <div class="color_box"></div>
      <!-- <div class="ttop"> -->
      <el-form :inline="true" :model="formInlinesss" class="demo-form-inline">
        <el-form-item label="部门名称">
          <el-input v-model="formInlinesss.password"></el-input>
        </el-form-item>
      </el-form>
      <!-- </div> -->
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="querens">确 认</el-button>
      </div>
    </el-dialog>
    <!-- 修改岗位弹框 -->
    <el-dialog
      title="修改岗位"
      :modal-append-to-body="false"
      :visible.sync="dialogVisiblessg"
      width="30%"
    >
      <div class="color_box"></div>
      <!-- <div class="ttop"> -->
      <el-form :inline="true" :model="formInlinesssg" class="demo-form-inline">
        <el-form-item label="岗位名称">
          <el-input v-model="formInlinesssg.password"></el-input>
        </el-form-item>
      </el-form>
      <!-- </div> -->
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="querensg">确 认</el-button>
        <el-button size="small" type="info" @click="dialogVisiblessg=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableDatas: [],
      dialogVisibles: false,
      formInliness: {
        value: {},
        password: ""
      },
      options: [],
      dialogVisibless: false,
      formInlinesss: {
        password: ""
      },
      bumen: "",
      dialogVisiblessg: false,
      formInlinesssg: {
        password: ""
      },
      old: "",
      depart: "",
      total: 1,
      current: 1,
      pagesize: 10
    };
  },
  created() {
    this.getData();
    this.getDatas();
  },
  methods: {
    // 获取部门岗位信息
    getData() {
      var obj = {
        id: 3
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PresidentManagement.asmx/Limited?index=2&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        console.log(list);
        for (var i = 0; i < list.length; i++) {
          for (var j = 0; j < list[i].lstposition.length; j++) {
            list[i].DepartNames = list[i].lstposition[j].value;
          }
        }
        this.tableDatas = list;
      });
    },
    getDatas() {
      var obj = {
        id: 4
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PresidentManagement.asmx/Limited?index=2&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        console.log(list);
        this.options = list;
      });
    },
    Return() {
      window.history.go(-1);
    },
    ads() {
      this.dialogVisibles = true;
      this.formInliness.value = "";
      this.formInliness.password = "";
    },
    xzengbumen() {
      this.dialogVisibless = true;
    },
    querend() {
      if (this.bumen) {
        var abc = this.bumen;
      } else {
        this.$message.error("请选择部门");
        return false;
      }
      var obj = {
        id: 2,
        depart: abc,
        position: this.formInliness.password
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PresidentManagement.asmx/Limited?index=2&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        // var list = JSON.parse(datas.string.__text);
        if (datas.string.__text == "新增成功") {
          this.$message.success("新增成功");
          this.dialogVisibles = false;
          this.getData();
          this.getDatas();
        }else{
          this.$message.error(datas.string.__text);
        }
      });
    },
    querens() {
      var obj = {
        depart: this.formInlinesss.password
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PresidentManagement.asmx/Limited?index=5&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        // console.log(datas)
        if (datas.string.__text == "ok") {
          this.$message.success("新增成功");
          this.dialogVisibless = false;
          this.getData();
          this.getDatas();
        }
      });
    },
    changes(e) {
      console.log(e);
      this.bumen = e.value;
    },
    // 修改岗位
    xiugai(e, b) {
      console.log(e, b);
      this.dialogVisiblessg = true;
      this.old = e;
      this.depart = b;
      this.formInlinesssg.password = e;
    },
    // 修改确认
    querensg() {
      var obj = {
        id: 1,
        oldposition: this.old,
        position: this.formInlinesssg.password,
        depart: this.depart
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PresidentManagement.asmx/Limited?index=2&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log(datas);
        if (datas.string.__text == "修改成功") {
          this.$message.success("修改成功");
          this.dialogVisiblessg = false;
          this.getData();
        }
      });
    },
    // 分页
    handleCurrentChange() {
      // this.getData(e - 1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.top-box {
  width: 100%;
  height: 60px;
  overflow: hidden;
  margin-bottom: 30px;
}
.left-box {
  width: 100px;
  height: 40px;
  float: left;
  margin-top: 10px;
  overflow: hidden;
  margin-left: 1%;
}
.color-box {
  width: 5px;
  height: 20px;
  float: left;
  margin-top: 10px;
  background-color: $Header_color;
}
.left-box p {
  float: left;
  margin-left: 5px;
  line-height: 40px;
}
.right-box {
  float: right;
  margin-right: 2%;
  border-radius: 5px;
  margin-top: 15px;
}
.xzbm {
  padding-top: 10px;
  text-align: right;
  background-color: #fff;
  margin-bottom: 20px;
  padding-bottom: 10px;
}
.xzbm button {
  margin-right: 10px;
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $Header_color;
  position: absolute;
  top: 22px;
  left: 10px;
}
.dialog-footer {
  text-align: center;
}
.tb {
  background-color: #fff;
  width: 100%;
  margin-bottom: 20px;
}
.table {
  border: 1px solid rgb(238, 232, 232);
  border-top: 0px solid rgb(238, 232, 232);
}
.pgnt {
  text-align: center;
}
</style>